<template>
    <div>
        <el-dialog :fullscreen="fullscreen" :visible.sync="isShow" v-bind="$attrs" :show-close="false" :before-close="beforeClose">
            <el-row slot="title">
                <el-col :span="10" style="padding-top: 5px">
                    <span>{{ title }}</span>
                </el-col>
                <el-col :span="2" :offset="11">
                    <el-button type="text" v-if="!fullscreen" icon="iconfont ali-quanping" @click="fullscreen = true" style="float: right"></el-button>
                    <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="fullscreen = false" style="float: right"></el-button>
                </el-col>
                <el-col :span="1">
                    <el-button type="text" icon="iconfont ali-guanbi" @click="parentCloseEvent" style="float: right"></el-button>
                </el-col>
            </el-row>
            <!-- 动态加载组件 -->
            <el-form ref="form" :model="formData" :label-width="labelWidth">
                <el-form-item 
                    v-for="(field, index) in columns.fields" 
                    :key="index" 
                    :label="field.label" 
                    :prop="field.value" 
                    :rules="field.rule ? filter_rules(field.rule) : []"
                    >
                    <component 
                        :is="field.el" 
                        :value.sync="formData[field.value]" 
                        :option="field.option"
                        />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import numInput     from '@/components/IvFormTemp/ivNumInput'
import strInput     from '@/components/IvFormTemp/ivStrInput'
import ivTextarea   from '@/components/IvFormTemp/ivTextarea'
import ivRadio      from '@/components/IvFormTemp/ivRadio'
import ivCheckBox   from '@/components/IvFormTemp/ivCheckBox'
import ivSelect     from '@/components/IvFormTemp/ivSelect'
import ivDatePicker from '@/components/IvFormTemp/ivDatePicker'
import ivUpload     from '@/components/IvFormTemp/ivUpload'

export default {
    name: 'iv-dialog',
    components: { 
            numInput,
            strInput,
            ivTextarea,
            ivRadio,
            ivCheckBox,
            ivSelect,
            ivDatePicker,
            ivUpload
        },
    data() {
        return {
            fullscreen: false
        }
    },
    props: {
        form: {
            type: Object,
            default: () => {}
        },
        columns: {
            tyep: Array,
            default: () => []
        },
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        labelWidth: {
            type: String,
            default: '80px'
        }

    },
    computed: {
        formData: {
            get(){
                return this.form
            },
            set(val){
                this.$emit('update:form', val)
            }
        },
        isShow: {
            get() {
                return this.show;
            },
            set(val) {
                this.$emit("update:show", val)
            }
        }
    },
    methods: {
        close() {
            this.isShow = false
        },
        beforeClose() {
            this.isShow = false
        },
        parentCloseEvent() {
            this.isShow = false
        },
        async submit() {//表单提交
            const bool = await this.validate();
            if(bool){
                this.$emit('submit', this.formData)
            }
        },
        async validate(){
            let flag = false
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return false;
                }
                flag = true;
            });
            return flag;
        }
    }
}
</script>
